<template>
  <view
    class="ui-checkbox"
    :class="[ isDisabled ? 'is-disabled' : ''  , `is-${boxDirection}`, size ? `is-${size}` : '']"
  >
    <view class="ui-checkbox-container">
      <slot name="icon" v-if="$slots.icon"></slot>
      <view
        class="ui-checkbox--icon-wrap"
        :class="[ `is-${shape}`, checked ? 'is-checked' : '' ]"
        @tap="toggle()"
        :style="iconStyle"
        v-else
      >
        <uiIcon type="ui-icon" :size="iconSize" name="ui-icon-success" class="ui-checkbox--icon" />
      </view>

      <view class="ui-checkbox--label" @tap="onClickLabel">
        <slot />
      </view>
    </view>
  </view>
</template>
<script>
import uiIcon from "components/base/icon/index.vue";
export default {
  name: "uiCheckBox",
  components: { uiIcon },
  inject: {
    checkboxgroup: {
      default: undefined
    }
  },
  data() {
    return {
      sizeWithUnit: "20px"
    };
  },
  props: {
    value: Boolean,
    size: {
      type: String,
      default: ""
    },
    disabled: Boolean,
    useIconSlot: Boolean,
    name: String,
    checkedColor: String,
    labelPosition: String,
    labelDisabled: Boolean,
    shape: {
      type: String,
      default: "round"
    },
    iconSize: {
      type: [Number, String],
      default: 32
    },
    direction: {
      type: String,
      default: "vertical"
    }
  },
  computed: {
    // 按钮的大小
    iconStyle() {
      return this.checkedColor && this.value
        ? `background-color: ${this.checkedColor};border-color: ${this.checkedColor};`
        : "";
    },
    // 按钮是否是disabled  由本身和上级 checkboxGroup决定
    isDisabled() {
      return (
        (this.checkboxgroup && this.checkboxgroup.disabled) || this.disabled
      );
    },
    // 是否勾选
    // 为什么不直接使用 value ？
    // 因为 对于其本身是否选中不一定是按照v-model来决定 其也可以通过 checkboxGroup 的v-model判断其是否选中
    checked: {
      get() {
        if (this.checkboxgroup) {
          return this.checkboxgroup.value.indexOf(this.name) !== -1;
        }
        return this.value;
      },

      set(val) {
        if (this.checkboxgroup) {
          this.setParentValue(this.checkboxgroup, val);
        } else {
          this.$emit("input", val);
        }
      }
    },

    boxDirection() {
      return (
        (this.checkboxgroup && this.checkboxgroup.direction) || this.direction
      );
    }
  },
  created() {
    if (this.checkboxgroup && this.checkboxgroup.children !== undefined) {
      this.checkboxgroup.children.push(this);
    }
  },
  methods: {
    emitChange(value) {
      if (this.checkboxgroup) {
        this.setParentValue(this.checkboxgroup, value);
      } else {
        this.$emit("input", value);
        this.$emit("change", value);
      }
    },

    toggle(checked = !this.checked) {
      // const { disabled, value } = this;
      // if (!disabled) {
      //   this.emitChange(!value);
      // }

      clearTimeout(this.toggleTask);
      this.toggleTask = setTimeout(() => {
        this.checked = checked;
      });
    },

    onClickLabel() {
      const { labelDisabled, disabled, value } = this;
      if (!disabled && !labelDisabled) {
        this.emitChange(!value);
      }
    },

    setParentValue(parent, value) {
      const parentValue = parent.value.slice();
      const { name } = this;
      const { max } = parent;

      if (value) {
        if (max && parentValue.length >= max) {
          return;
        }

        if (parentValue.indexOf(name) === -1) {
          parentValue.push(name);
          this.checkboxgroup.$emit("input", parentValue);
        }
      } else {
        const index = parentValue.indexOf(name);
        if (index !== -1) {
          parentValue.splice(index, 1);
          this.checkboxgroup.$emit("input", parentValue);
        }
      }
    },

    setSizeWithUnit(size) {
      this.sizeWithUnit = uni.px(size);
    }
  }
};
</script>

<style lang="scss">
$checkbox-height: 40upx;

.ui-checkbox {
  .ui-checkbox-container {
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    font-size: $font-size-base;
    .ui-checkbox--image-wrap {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      image,
      img {
        width: 100%;
        height: 100%;
        padding-top: 0;
      }
    }
    .ui-checkbox--icon-wrap {
      flex: none;
      display: block;
      box-sizing: border-box;
      width: 1em;
      height: 1em;
      color: transparent;
      line-height: 1em;
      text-align: center;
      border: 1px solid #c8c9cc;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;
      -webkit-transition-property: color, border-color, background-color;
      transition-property: color, border-color, background-color;



      &.is-round {
        border-radius: 50%;
      }
      &.is-checked {
        color: #fff;
        background-color: $brand-primary;
        border-color: $brand-primary;
        .ui-checkbox--icon {
          color: $color-text-base-inverse;
        }
      }
    }

    .ui-checkbox--label {
      word-wrap: break-word;
      margin-left: $h-spacing-small;
    }
  }
  &.is-disabled > .ui-checkbox-container {
    cursor: not-allowed;
    .ui-checkbox--icon-wrap {
      background-color: #ebedf0;
      border-color: #c8c9cc;
      .ui-checkbox--icon {
        color: #ebedf0;
      }
      &.is-checked {
        .ui-checkbox--icon {
          color: #c8c9cc;
        }
      }
    }

    .ui-checkbox--label {
      color: $color-text-disabled;
    }
  }

  &.is-horizontal {
    display: inline;
    .ui-checkbox-container {
      display: inline-flex;
    }
    & + & {
      margin-left: $v-spacing-base;
    }
  }

  &.is-small {
    .ui-checkbox--icon-wrap {
      font-size: $font-size-small;
    }
    .ui-checkbox--label {
      font-size: $font-size-small;
    }
  }
  &.is-mini {
    .ui-checkbox-container {
      height: 44rpx;
      line-height: 44rpx;
    }

    .ui-checkbox--icon-wrap {
      font-size: 32rpx;
    }
    .ui-checkbox--label {
      font-size: $font-size-mini;
    }
  }
}
</style>